
<template>
  <div class="chart">
    
    <div align="center">


    <el-button-group>
      <el-button type="primary" size="small">现有确诊</el-button>
      <el-button type="primary" size="small">累积确诊</el-button>
    </el-button-group>
    </div>
    <div align="center" >截至2020年9月3日</div>
    <div id="map"></div>
    
    
    <div align="center">
     <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    
  </el-select>
  
  <div id="map_shanghai"></div>
    </div>
    
  </div>
</template>

<script>

export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '北京'
        }, {
          value: '选项2',
          label: '天津'
        }, {
          value: '选项3',
          label: '上海'
        }, {
          value: '选项4',
          label: '河北'
        }, {
          value: '选项5',
          label: '江西'
        }],
        value: ''
      }
    },
  
  
  methods: {
    loadChinaMap(){
      let data = [
        { name: "北京", value: 5 },
        { name: "天津", value: 4 },
        { name: "河北", value: 3 },
        { name: "山西", value: 1 },
        { name: "内蒙古", value: 2 },
        { name: "辽宁", value: 3 },
        { name: "吉林", value: 3 },
        { name: "黑龙江", value: 2 },
        { name: "上海", value: 5 },
        { name: "江苏", value: 4 },
        { name: "浙江", value: 4 },
        { name: "安徽", value: 1 },
        { name: "福建", value: 1 },
        { name: "江西", value: 5 },
        { name: "山东", value: 2 },
        { name: "河南", value: 1 },
        { name: "湖北", value: 2 },
        { name: "湖南", value: 3 },
        { name: "广东", value: 5 },
        { name: "广西", value: 4 },
        { name: "海南", value: 6 },
        { name: "重庆", value: 3 },
        { name: "四川", value: 5 },
        { name: "贵州", value: 4 },
        { name: "云南", value: 4 },
        { name: "西藏", value: 1 },
        { name: "陕西", value: 1 },
        { name: "甘肃", value: 2 },
        { name: "青海", value: 4 },
        { name: "宁夏", value: 2 },
        { name: "新疆", value: 5 },
        { name: "台湾", value: 1 },
        { name: "香港", value: 1 },
        { name: "澳门", value: 4 },
        { name: "南海诸岛", value: 5 },
        { name: "南海诸岛", value: 5 },
      ];

      var mapdata = Highcharts.maps["cn/china"];
      var chart = Highcharts.mapChart("map", {
        title:{
            text:"中国疫情分布图"},
            
        colorAxis: {
          min: 0,
          max: 5,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [
          {
            mapData: mapdata,
            data,
            joinBy: "name",
            dataLabels:{
              enabled:true,
              color:"#fff",
              style:{"fontSize":"10px","fontWeight":"thin"},
              format:`{point.name}`
            }
          },
        ],
      });
    },
    loadShanghaiMap(){
      
      let mapdata = Highcharts.maps['cn/shanghai'];
      
      let map = Highcharts.mapChart('map_shanghai', {
        title:{
          text:"上海疫情分布图"
        },
        colorAxis: {
          min: 0,
          max: 20,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [{
          mapData: mapdata,
          data:[
            { name:"静安区", value:4 },
            { name:"长宁区", value:2 },
            { name:"普陀区", value:10 },
            { name:"普陀区", value:10 },
            { name:"奉贤区", value:2 }
          ],
          joinBy:"name",
          dataLabels:{
            enabled:true,
            color:"#fff",
            style:{"fontSize":"10px","fontWeight":"thin"},
            format:`{point.name}`
          }
        }]
      });
    }
  },

  
  created() {
    
  },
  
  mounted() {
    
    this.loadChinaMap();
    
    this.loadShanghaiMap();
  },
};
</script>

<style scoped>
#map,
#map_shanghai {
  height: 600px;
}

.btnCss {
    background-color: #F6F6F6;
    color: #000000;
}
 　　　　　　
.upBtnCss {
    background-color: #FD8D27;
    color: #ffffff;
}
.primary-btn {
  font-size: 14px;
  color: #fff;
  height: 44px;
  padding: 0 15px;
  background-color: #07c160;
  border: 1px solid #07c160;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  outline: none;
  position: relative;
}
.primary::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  opacity: 0;
  content: ' ';
}
.primary:active::before {
  opacity: 0.1;
}


</style>